<template>
    <div class="app-container">
        <div class="customContainer ">
            <!-- 时间-品牌-门店-搜索 -->
            <dj-search-tbs ref="search" @fetchData="fetchData" categoryId="294" :storeId="storeId"></dj-search-tbs>
            <el-table highlight-current-row :data="list" v-loading.body="listLoading" border size="small">
                <el-table-column align="center" prop="type" label="消费类型"></el-table-column>
                <el-table-column align="center" prop="ten" label="10次卡"></el-table-column>
                <el-table-column align="center" prop="twenty" label="20次卡"></el-table-column>
                <el-table-column align="center" prop="six" label="6次卡"></el-table-column>
                <el-table-column align="center" prop="twelve" label="12次卡"></el-table-column>
                <el-table-column align="center" prop="star" label="星星卡"></el-table-column>
                <el-table-column align="center" prop="month" label="月卡"></el-table-column>
                <el-table-column align="center" prop="quarter" label="季卡"></el-table-column>
                <el-table-column align="center" prop="year" label="年卡"></el-table-column>
                <el-table-column align="center" prop="tickets" label="门票区门票"
                    :render-header="(h,obj) => renderHeader(h,obj,'门票区门票消费=门票刷卡套餐会员卡类消费+门票无卡套餐消费+湖心岛门票区属性卡头消费')">
                    <template slot-scope="scope">
                        <el-button type="text" @click="getDetailClick(1)">{{scope.row.tickets}}</el-button>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="门票区陪同票"
                    :render-header="(h,obj) => renderHeader(h,obj,'门票区陪同票消费=会员卡类购票消费+现金购票消费+湖心岛陪同票属性卡头消费')">
                    <template slot-scope="scope">
                        <el-button type="text" @click="getDetailClick(2)">{{scope.row.accompany}}</el-button>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="sale" label="门票区销售"></el-table-column>
                <el-table-column align="center" prop="total" label="合计"></el-table-column>
            </el-table>
            <!-- 弹框 -->
            <el-dialog width="80%" :close-on-click-modal="false" title="消费详情" :visible.sync="detailDialog"
                style="margin-top:-5vh">
                <el-table highlight-current-row :data="detailList" border size="small">
                    <el-table-column align="center" label="套餐名称" prop="name"></el-table-column>
                    <el-table-column align="center" label="消费次数" prop="tickets_count"></el-table-column>
                    <el-table-column align="center" label="消费币数（星数）" prop="tickets_coins"></el-table-column>
                    <el-table-column align="center" label="消费金额" prop="money"></el-table-column>
                    <el-table-column align="center" label="支付方式" prop="pay_type"></el-table-column>
                </el-table>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    import {
        getList,
        accompany_info
    } from "@/api/storage_control/hxd_consume_form";
    import { renderHeader } from '@/utils'
    export default {
        data() {
            return {
                detailDialog: false,
                renderHeader,
                listLoading: false,
                storeId: "",
                list: [],
                detailList: []
            };
        },
        methods: {
            getDetailClick(type) {
                accompany_info(this.formInline, type).then(response => {
                    response.forEach(val => {
                        val.tickets_count= val.tickets_count||'-';
                        val.tickets_coins= val.tickets_coins||'-';
                        val.money = type === 1 ? (val.tickets_money * 1).toFixed(2) * 1 : (val.accompany_money * 1).toFixed(2) * 1
                    });
                    this.detailList = response
                    //console.log(this.detailList);
                })
                this.detailDialog = true
            },
            // 列表获取
            fetchData(formInline) {
                this.formInline = formInline;
                this.listLoading = true;
                this.list = [];
                getList(formInline).then(response => {
                    this.list.push({
                        id: 1,
                        type: '消费次数',
                        ten: response.ten_count * 1,
                        twenty: response.twenty_count * 1,
                        six: response.six_count * 1,
                        twelve: response.twelve_count * 1,
                        star: response.star_count * 1,
                        month: response.month_count * 1,
                        quarter: response.quarter_count * 1,
                        year: response.year_count * 1,
                        tickets: response.tickets_count * 1,
                        accompany: response.accompany_count * 1,
                        sale: response.sale_count * 1,
                        total:response.six_count * 1 + response.twelve_count * 1 + response.month_count * 1 + response.ten_count * 1 + response.twenty_count * 1 + response.star_count * 1 + response.quarter_count * 1 + response.year_count * 1 + response.tickets_count * 1 + response.accompany_count * 1 + response.sale_count * 1,
                    })
                    this.list.push({
                        id: 2,
                        type: '消费币数（星数）',
                        ten: '-',
                        twenty: '-',
                        six: '-',
                        twelve: '-',
                        star: response.star_coins * 1,
                        month: '-',
                        quarter: '-',
                        year: '-',
                        tickets: response.tickets_coins * 1,
                        accompany: response.accompany_coins * 1,
                        sale: response.sale_coins * 1,
                        total: response.star_coins * 1 +response.tickets_coins * 1 + response.accompany_coins * 1 + response.sale_coins * 1
                    })
                    this.list.push({
                        id: 3,
                        type: '消费金额',
                        ten: (response.ten_money / 1000000).toFixed(2),
                        twenty: (response.twenty_money / 1000000).toFixed(2),
                        six: (response.six_money / 1000000).toFixed(2),
                        twelve: (response.twelve_money / 1000000).toFixed(2),
                        star: (response.star_money / 1000000).toFixed(2),
                        month: '-',
                        quarter: '-',
                        year: '-',
                        tickets: (response.tickets_money / 1000000).toFixed(2),
                        accompany: (response.accompany_money / 1000000).toFixed(2),
                        sale: (response.sale_money / 1000000).toFixed(2),
                        total: ((response.ten_money * 1 + response.twenty_money * 1 + response.six_money * 1 + response.twelve_money * 1 + response.star_money * 1 + response.tickets_money * 1 + response.accompany_money * 1 + response.sale_money * 1) / 1000000).toFixed(2),
                    })
                    this.listLoading = false;
                }).catch(res=>{
                    this.listLoading=false;
                })
            },
            getStoreId(){
                if(this.$route.params.store_id){
                    this.storeId=this.$route.params.store_id
                }else{
                    this.storeId=""
                }
                //console.log(this.storeId)
            }
        },
        activated(){
            this.getStoreId();
        }
    };
</script>